<style>
    .layui-form-label {
        text-align: left;
    }
</style>
<title>菜单编辑</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>菜单</cite></a>
        <a><cite>菜单列表</cite></a>
        <a><cite>编辑菜单</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-spacel5">
        <div class="layui-card">
            <div class="layui-card-header">编辑菜单</div>
            <div class="layui-card-body" style="padding: 15px;">
                <form class="layui-form" action="" lay-filter="component-form-group">
                    <input type="hidden" name="menuId" id="menuId" value="{{menuId}}">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label required">菜单名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="menuName" lay-verify="required|menuName" autocomplete="off"
                                       placeholder="请输入菜单名称" class="layui-input" value="{{menuName}}">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">菜单样式</label>
                            <div class="layui-input-inline">
                                <input type="text" name="menuStyle" autocomplete="off" placeholder="请输入菜单样式"
                                       class="layui-input" value="{{menuStyle}}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label required">上级菜单</label>
                            <div class="layui-input-inline">
                                <input type="hidden" name="parentMenuId" id="parentMenuId" value="{{ parentMenuId}}"/>
                                <input type="text" name="parentMenuName" id="parentMenuName" autocomplete="off"
                                       placeholder="请输选择上级菜单" class="layui-input" value="{{ parentMenuName}}">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label required">页面路径</label>
                            <div class="layui-input-inline">
                                <input type="text" name="url" lay-verify="required|text" autocomplete="off"
                                       placeholder="请输入菜单页面路径" class="layui-input" value="{{ url}}">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">菜单序号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="menuOrder" lay-verify="required|menuOrder" placeholder="菜单序号"
                                       autocomplete="off" class="layui-input" value="{{ menuOrder}}">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">菜单编码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="menuCode" lay-verify="required|menuCode" placeholder="菜单编码"
                                       autocomplete="off" class="layui-input" value="{{ menuCode}}">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <select name="status" id="status" lay-verify="required" value="{{ status}}">
                                    <option value="0">有效</option>
                                    <option value="1">无效</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                        <textarea type="text" name="remark" placeholder="备注"
                                  class="layui-textarea">{{ remark}}</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item" style="text-align: right">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="component-form-ts-menu">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            <a lay-href="/menu/list" class="layui-btn layui-btn-primary">
                                <i class="layui-icon layui-icon-return"></i>返回
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<style>
    .liactive {
        background: #1E9FFF;
    }
</style>
<script>
    var $menuId, $menuName;
    layui.use(['admin', 'form', 'laydate', 'tree', 'common'], function () {

        var $ = layui.$, admin = layui.admin, element = layui.element
                , layer = layui.layer
                , laydate = layui.laydate
                , form = layui.form, basePath = layui.common.basePath;

        form.render(null, 'component-form-group');
        laydate.render({
            elem: '#LAY-component-form-group-date'
        });
        admin.req({
            url: basePath + 'system/tsMenu/findTsMenuById.do' //实际使用请改成服务端真实接口
            , data: {menuId: layui.router().search.menuId}
            , type: 'get'
            , done: function (res) {
                if (res.code == 0) {
                    form.val("component-form-group", res.data);
                } else {
                    layer.msg(res.msg);
                    return;
                }
            }, success: function (res) {
            }, error: function (res) {
            }
        });

        /* 监听提交 */
        form.on('submit(component-form-ts-menu)', function (data) {
            admin.req({
                url: basePath + 'system/tsMenu/updateTsMenu.do' //实际使用请改成服务端真实接口
                , data: data.field
                , type: 'post'
                , done: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        }, function () {
                            location.hash = '/menu/list';
                        });
                    } else {
                        layer.msg(res.msg, {
                            offset: '15px'
                            , icon: 2
                            , time: 1000
                        }, function () {
                        });
                        return;
                    }
                }, success: function (res) {
                    console.log(res)
                }, error: function (res) {
                    console.log(res)
                }
            });
            return false;
        });

        $("#parentMenuName").off('click');
        /* 加载菜单树 */
        $("#parentMenuName").on('click', function () {
            layer.open({
                type: 1,
                area: ['400px', '400px'],
                title: '选择上级菜单',
                zIndex: layer.zIndex + 1,
                scrollbar: true,
                btn: ['确定', '取消'],
                content: '<div class="layui-tree" id="menu_tree"></div>', //注意，如果str是object，那么需要字符拼接。
                yes: function (index, layero) {
                    if ($menuId == null) {
                        layer.msg("请选择菜单");
                        return;
                    }
                    $("#parentMenuId").val($menuId);
                    $("#parentMenuName").val($menuName);
                    layer.close(index);
                },
                btn2: function (index) {
                    $menuId = null;
                    $menuName = null;
                    layer.close(index);
                },
                cancel: function () {
                    $menuId = null;
                    $menuName = null;
                }

            });

            $.post(basePath + 'system/tsMenu/getMenuTree.do', {access_token: layui.data('layuiAdmin').access_token}, function (data) {
                var dataObj = eval("(" + data + ")");
                layui.tree({
                    elem: '#menu_tree'
                    , target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
                    , click: function (node) {
                        $menuId = node.id;
                        $menuName = node.name;
                    }
                    , nodes: dataObj
                });
            });

        });

        $("body").on("mousedown", ".layui-tree a", function () {
            $(".layui-tree a cite").parent().removeClass('liactive'); //css('color','#333');
            $(this).find('cite').parent().addClass('liactive'); //.css('color','red');
        });
        layui.form.render();
    });


</script>